<template>
	<div class="container">
		<v-toolbar :reportSearchIP="barData.searchIP" @handleSearch="handleSearch" :reportStartTime="barData.startTime"
			:reportEndTime="barData.endTime" @timeChange="timeIsChange"></v-toolbar>
		<el-table :data="tableDataFn" border style="width: 100%" stripe>
			<el-table-column type="index" width="50" label="序号">
			</el-table-column>
			<template v-for="item in serverItem">
				<el-table-column :prop="item.prop" :label="item.label" :sortable="item.sortable" :fit="true"
					:key="item.ID" align="center">
					<template v-slot="scope">
						<template v-if="item.prop == 'REPORT'">
							<el-button type="primary" @click="serverDialog(scope.row)">查看</el-button>
						</template>
						<!-- <template v-else-if="item.prop == 'TAG'">
							<el-tag type="primary">{{
								scope.row[item.prop]
							}}</el-tag>
						</template> -->
						<template v-else>
							{{ scope.row[item.prop] }}
						</template>
					</template>
				</el-table-column>

				<!-- <template >
					<el-table-column
						:prop="item.prop"
						:label="item.label"
						:width="item.width"
						:key="item.ID"
					>
					
					</el-table-column>
				</template>
				<template v-else>
					<el-table-column
						:prop="item.prop"
						:label="item.label"
						:width="item.width"
						:key="item.ID"
					>
					{{scope.row}}
					</el-table-column>
				</template> -->

				<!-- </template> -->

				<!-- <el-table-column prop="address" label="报告"> 

				<el-button type="info">信息按钮</el-button>
			</el-table-column> -->
			</template>
		</el-table>
		<v-pagination :dataTotal="postData.dataTotal" :curPage="postData.curPage" :pageSize="postData.pageSize"
			@getCurPage="getPaginationCurPage" @getPageSize="getPaginationPageSize" v-show="showpagination">
		</v-pagination>

		<v-Dialog @haldDialogfalse="haldDialogfalse" :dialogVisible="dialogVisible" itemType="Database"
			:dialogData="dialogServerItem" :title="'服务器运行报告'" :info="info"></v-Dialog>
	</div>
</template>

<script>
	import {
		fetchData
	} from '@/api/index.js';
	import bus from 'common/bus.js';
	import vToolbar from '../reportToolbarServer';
	import {
		serverItem,
		dialogServerItem
	} from '../dialogItem';
	import vDialog from '../reportDialogServer';
	import vPagination from 'common/Pagination.vue';
	import {
		selecthost,
		selectosinfo,
		selectoscpu,
		selectosmemory,
		selectosfile,
	} from '@/api/index';
	import {
		indexedDb,
		getData,
		DeleteDataBase,
		getUserData
	} from '@/utils/IndexedDB.js';
	import moment from 'moment';

	export default {
		name: 'report_server',
		components: {
			vToolbar,
			vDialog,
			vPagination,
		},
		data() {
			return {
				searchIP: '',
				dialogVisible: false,
				info: '',
				dialogServerItem: dialogServerItem,
				barData: {
					searchIP: '',
					startTime: '2008-08-08 20:00:00',
					endTime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
				},
				postData: {
					// 当前页数
					curPage: 1,
					//每页显示个数
					pageSize: 10,
					//总条目数
					dataTotal: 0,
				},

				serverItem: serverItem,
				routes: this.$route.path,
				tableData: [],
				showpagination: true,
				searchIp: ''
			};
		},
		created() {
			this.initData();


		},
		beforeDestroy() {

			DeleteDataBase("reportData", "serverBase")
		},
		computed: {
			tableDataFn() {
				return this.tableData.filter(item => item.ip.includes(this.searchIP))
			}
		},
		methods: {
			handleSearch(data) {
				if (data == '') {
					this.searchIP = '';
					this.showpagination = true;
				} else {
					this.searchIP = data;
					this.showpagination = false
				}

			},
			initData() {
				selecthost().then((res) => {
						this.postData.dataTotal = res.length;
						indexedDb('reportData', res, 'serverBase', 'ip');
						this.tableData = getData('reportData', 'serverBase', this.postData);
					})
					.catch((err) => {
						console.log(err);
					});
			},
			serverInfo() {
				this.tableData = getData('reportData', 'serverBase', this.postData);
			},
			timeChange() {},
			timeProcess(time) {
				return moment(time).format('YYYY-MM-DD HH:mm:ss');
			},
			timer() {
				this.barData.startTime = this.timeProcess(this.barData.startTime);
				this.barData.endTime = this.timeProcess(this.barData.endTime);
			},
			timeIsChange(data) {
				console.log(data);
				this.barData.startTime = this.timeProcess(data.startTime);
				this.barData.endTime = this.timeProcess(data.endTime);
				console.log(this.barData);
			},
			getChangeLie(val) {
				// 遍历表格列
				this.serverItem.map((item, index) => {
					// 列的显示隐藏状态改变
					item.isShow = val.includes(item.label);
				});
			},
			serverDialog(data) {
				sessionStorage.setItem('getIP',data.ip)
				this.dialogVisible = true;
				// console.log(data)
				this.info = {
					ip: data.ip,
					// ip: '172.20.1.117',
					time: this.barData.startTime,
					time2: this.barData.endTime,
				};
			},
			haldDialogfalse() {
				this.dialogVisible = false;
				this.$routes.push(this.routes);
			},
			getPaginationCurPage(val) {
				this.postData.curPage = val;

				this.serverInfo();
			},
			getPaginationPageSize(val) {
				// 分页大小改变之后，重置当前页码为 1
				this.postData.curPage = 1;
				this.postData.pageSize = val;

				this.serverInfo();
			},
		},

	};
</script>

<style scoped>
	.container {
		/* height: 100%; */
		color: aliceblue;
	}

	.toolBar {
		display: flex;
		margin-bottom: 14px;
	}

	.searchInput {
		width: 240px;
		margin-right: 10px;
	}

	/* .container .internetReport {
	height: calc(100% - 24px);
	display: flex;
	flex-direction: column;
	border: 1px solid rgb(236, 137, 137);
} */

	.netContentRow {
		height: 100%;
		color: aliceblue;
	}

	.mainBox .columnBox {
		/* height: 30%; */
		margin-bottom: 10px;
	}

	.gradientBox {
		position: relative;
		padding: 7px 10px;
		overflow: hidden;
		text-align: center;
		border-radius: 5px;
		box-shadow: 0px 0px 24px rgb(72, 119, 128) inset !important;
	}

	.navigationBarText {
		color: crimson;
		font-size: large;
	}

	.gradientBox:last-child {
		margin-bottom: 0;
	}

	.titleText {
		width: 100%;
		font-size: x-large;
		text-align: center;
		color: mediumblue;
		background-color: mediumspringgreen;
	}

	/* 导航 */
	.textNetBox>div {
		height: 100%;
	}

	/* 栏目框 */
	.columnBox>div {
		height: 100%;
	}

	/* .textNetBox .gradientBox {
    max-height: calc(100% - 7px * 2);
} */
	/* .topRow .gradientBox {
    height: calc(100% - 7px * 2);
} */
	/* 中间部分 */
	/* .midRow > div {
    height: 100%;
} */
	/* .midRow .gradientBox {
    height: calc(100% - 7px * 2);
} */
	/* 下部 */
	/* .bottomRow > div {
    height: 100%;
} */
	/* .bottomRow .gradientBox {
    height: calc(100% - 7px * 2);
} */
</style>